<template>
<view class="page"> 
	<template v-if="isLogin">
		<view class="h90">
			<view class="fix-wrap">
				<view class="h45 search-bar">
					<view class="search-form">
						<view class="icon sc-icon iconfont icon-sousuo">&#xe61e;</view>
						<input type="text" v-model="keyword" class="sc-inp"  placeholder="输入关键词搜索" @input="search">
						<view v-if="keyword" class="icon clear-btn iconfont icon-shanchu" @click="clearKeyword"></view>
					</view>
				</view>
				<view class="h45">
					<view class="filter-bar"> 
						<view :class="['item',{'active':filter_data.isShowProjectType}]" @click.stop="showFilter(1)">
							<view class="name">{{filter_data.select_envtypes||'生境类型'}}</view>
							<view class="iconfont icon-jiantou_liebiaozhankai_o f-s60">&#xeb8b;</view>
						</view>
						<view :class="['item',{'active':filter_data.isShowProjectStatus}]" @click.stop="showFilter(2)">
							<view class="name">{{filter_data.select_level_name||'总评等级'}}</view>
							<view class="iconfont icon-jiantou_liebiaozhankai_o f-s60">&#xeb8b;</view>
						</view>
					</view>
					
					<!-- 筛选区域 -->
					<view v-if="filter_data.isShowFilter" class="filter-select-page" @click="hideFilter">
						<!-- 生境类型 -->
						<template v-if="filter_data.isShowProjectType">
							<view class="filter-select-list">
								<view class="item" v-for="(item,index) in filter_data.envtypes" :key="index" @click="filterDataByType(item.value)">
									<view class="val">{{item.value}}</view>
									<view class="icon"> 
										<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
									</view>
								</view>
							</view>
						</template>
						
						<!-- 总评等级 -->
						<template v-if="filter_data.isShowProjectStatus">
							<view class="filter-select-list">
								<view class="item" v-for="(item,index) in filter_data.level" :key="index" @click="filterDataByLevel(item.value,item.name)">
									<view class="val">{{item.name}}</view>
									<view class="icon"> 
										<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view> 
			</view>
		</view>
		<view class="body">
			<view class="list-wrap">
				
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				
				<template v-else>
					<template v-if="list.length>0"> 		 
						<navigator :url="'/package_yundiaocha/dataDetail/dataDetail?id='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="pic">
								<image :src="http_request_url+'/image/image?path='+item.file_path" mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="name">{{item.env_type}}</view>
								<view class="params">
									<view class="text">{{item.address}}</view> 
									<view class="text">{{item.create_time}}</view> 
								</view>
							</view>
						</navigator> 
						
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<empty msg="暂无信息"></empty>
					</template>
					
				</template>
				 
				
			</view>
		</view>
		
		<!-- 底部 -->
		<!-- <view class="footer">
			<view class="fix-wrap bottom">
				<navigator open-type="navigate" hover-class="none" url="/package_yundiaocha/form/form" class="form-lay-btn">继续作业</navigator>
			</view>
		</view> -->
	</template>
	  
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {HTTP_REQUEST_URL} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			userInfo:uni.getStorageSync('userInfo'),
			loadingState:{
				default:true,
				loading:false,
				compelted:false
			}, 
			list:[],
			params:{
				dataRange: '',
				province: '',
				city: '',
				district:'',
				town: '',
				village: '',
				beginTime: '',
				endTime: '',
			},
			page:1,
			total:0,
			filter_data:{
				all_active:0,
				pro_active:2,
				sta_active:0,
				isShowFilter:false,
				isShowProjectType:false,
				isShowProjectStatus:false,
				select_envtypes:'',
				select_level:'',
				select_level_name:'',
				envtypes:[{
					check:false,
					value:'不限'
				}],
				level:[
					{
						value:'0',
						name:'不限',
						check:false 
					},
					{
						value:'1',
						name:'1级',
						check:false 
					},
					{
						value:'2',
						name:'2级',
						check:false 
					},
					{
						value:'3',
						name:'3级',
						check:false 
					},
					{
						value:'4',
						name:'4级',
						check:false 
					},
					{
						value:'5',
						name:'5级',
						check:false 
					},
				] 
			},
			keyword:'',
			http_request_url:HTTP_REQUEST_URL
		}
	},
	onShow() {
		
	},
	onReachBottom(){
		if(this.loadingState.completed){ 
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++; 
				this.getPcDataList(); 
			} 
		}	 
	},
	async onLoad(params) { 
		if(params.params){
			this.params=JSON.parse(params.params);
		} 
		
		this.isLogin=await this.$loginState('check');  
		if(this.isLogin){
			this.getEnvtype();
			this.getPcDataList();
		}
		
	},
	methods:{
		
		dataInit:function(){
			this.loadingState={
				default:true,
				loading:false,
				compelted:false
			};  
			this.list=[];
			this.total=0;
			this.page=1;
		},
		
		// 获取列表
		getPcDataList:async function(){
			let res=await this.$api.ydc_api.getPcDataList({
				uid: this.userInfo.id,
				dataRange: ''||this.params.dataRange,
				page: this.page,
				province: ''||this.params.province,
				city: ''||this.params.city,
				district:''||this.params.district,
				town: ''||this.params.town,
				village: ''||this.params.village,
				beginTime: ''||this.params.beginTime,
				endTime: ''||this.params.endTime,
				is_app:1,
				address:this.keyword,
				env_type:this.filter_data.select_envtypes,
				re_level:this.filter_data.select_level
			})     
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length==this.total){ 
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}else{
				this.loadingState.default=false;
			}
			 
		},
		
		// 获取生境类型
		getEnvtype: async function() {
			let res = await this.$api.yfk_api.getEnvtype();
			
			if (res.data.ret == 0) { 								
				res.data.data.envtypes.forEach(item=>{
					let data={};
					data.check=false;
					data.value=item;
					this.filter_data.envtypes.push(data);
				}) 	 
			}
		},
		
		// 打开过滤
		showFilter:function(type){
			// type 筛选条件  1 类型  2 状态		 		
			
			if(type==1){
				this.filter_data.isShowFilter=true;
				this.filter_data.isShowProjectType=true;
				this.filter_data.isShowProjectStatus=false;
				this.filter_data.pro_active=type;
				this.filter_data.all_active=null;
				this.params.datatype='pc';
			}else if(type==2){
				this.filter_data.isShowFilter=true;
				this.filter_data.isShowProjectType=false;
				this.filter_data.isShowProjectStatus=true;
				this.filter_data.sta_active=type;
				this.filter_data.all_active=null;
				this.params.datatype='pc';
			} 
		},
		
		// 关闭过滤
		hideFilter:function(){
			this.filter_data.isShowFilter=false;
			this.filter_data.isShowProjectStatus=false;
			this.filter_data.isShowProjectType=false;
		},
		
		// 生境类型过滤
		filterDataByType:function(protype){ 
			this.filter_data.envtypes.forEach(item=>{
				item.check=false;
				if(item.value==protype){					
					item.check=true;
					if(item.value=='不限'){
						this.filter_data.select_envtypes='';
					}else{
						this.filter_data.select_envtypes=item.value; 
					}
					this.dataInit();
					
					this.getPcDataList();
				}
			})
		},
		
		// 等级过滤
		filterDataByLevel:function(value,name){ 
			this.filter_data.level.forEach(item=>{
				item.check=false;
				if(item.value==value){
					this.filter_data.select_level=item.value; 
					this.filter_data.select_level_name=item.name; 
					item.check=true;
					if(item.value=='0'){
						this.filter_data.select_level='';
						this.filter_data.select_level_name=''; 
					}else{
						this.filter_data.select_level=item.value;
						this.filter_data.select_level_name=item.name;  
					}
					
					this.dataInit();
					this.getPcDataList();
					 
				}
			})
		},
		
		// 清空搜索词
		clearKeyword:function(){
			this.keyword='';
			this.dataInit(); 
			this.getPcDataList();
		},
		
		 
		// 搜索
		search:function(){
			this.dataInit();
			this.getPcDataList();
		},
	},
	computed:{
		list_update(){  
			return this.$store.state.diaochaListUpdate
		}
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){
				this.loadingState={
					default:true,
					loading:false,
					compelted:false
				};
				this.list=[];
				this.getPcDataList();
			}
		}
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.list-wrap{
		padding-top: 20rpx;
		.item{ 
			display: flex;
			padding:20rpx;
			margin-bottom: 20rpx;
			background:#fff;
			.pic{
				display: flex;
				align-items: center;
				justify-content: center;
				width:30%;
				max-height: 200rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:30rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
		}
	}
	
	.add-yj-btn{ 
		width: 96%;
		height:80rpx;
		margin:10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height:80rpx;
		color:#fff;
		font-size:32rpx;
	}
</style>
